<template>
	<view>
		<view class="marjor">
			<view v-for="item,index in majorList" :key="index">
				<view class="title">{{item.title}}</view>
				<view v-for="item2,index in item.list" :key="index">
					<text class="listIndex">{{index+1}}.</text>{{item2}}
				</view>
			</view>
			<view class="bottom-icon">
				<view class="iconfont icon-html"></view>
				<view class="iconfont icon-css" style="font-size: 50rpx;"></view>
				<view class="iconfont icon-javascript1"></view>
			</view>

			<view class="bottom-icon">
				<view class="iconfont icon-Vue"></view>
				<view class="iconfont icon-vant"></view>
				<view class="iconfont icon-Element" style="font-size: 56rpx;"></view>
				<view class="iconfont icon-bootstrap"></view>
			</view>

			<view class="bottom-icon">
				<view class="iconfont icon-node" style="font-size: 60rpx;"></view>
				<view class="iconfont icon-axurelogo" style="font-size: 38rpx;"></view>
				<!-- <view class="iconfont icon-less1" style="font-size: 52rpx;"></view> -->
				<view class="iconfont icon-less" style="font-size: 56rpx;"></view>
				<view class="iconfont icon-uni-app"></view>
			</view>

			<view class="bottom-icon">
				<view class="iconfont icon-MySQL"></view>
				<view class="iconfont icon-MongoDB" style="font-size: 38rpx;"></view>
				<view class="iconfont icon-Ioniconslogopython" style="font-size: 52rpx;"></view>
				<view class="iconfont icon-git" style="font-size: 52rpx;"></view>
			</view>
		</view>
		<view style="margin: 50rpx 0;">
			<view class="progress" v-for="(item,index) in progress" :key=index>
				<text style="font-size: 26rpx;padding-left: 10rpx;">{{item.title}}</text>
				<progress :percent="item.percent" show-info stroke-width="8" font-size=14 border-radius=20 active="true"
					duration=10 :activeColor="item.color" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				majorList: [{
						"title": "前端方向",
						list: [
							"熟悉掌握HTML、CSS、JavaScript等前端技术，能够根据原型图进行页面开发。",
							"熟悉使用JQuery库、Echarts、Bootstrap框架进行网页适应性优化。",
							"熟悉使用Vue、Vant、Element、UView等前端框架进行网页开发。",
							"了解并使用过Uni-App+UniCloud云开发进行小程序、H5开发。",
							"熟悉Node.js的使用，并能使用其开发后台管理系统。",
							"了解less、scss等预编译样式处理。"
						]
					},
					{
						"title": "后端方向",
						list: [
							"熟悉Mysql，MongoDB数据库开发技术",
							"熟练使用Git进行版本管理",
							"有一定的Java、Python基础"
						]
					}
				],
				progress: [{
						title: "HTML/JavaScript/CSS",
						percent: 90,
						color: "#4f822f"
					},
					{
						title: "JQuery/Echarts/Bootsrap",
						percent: 60,
						color: "#d97b6a"
					}, {
						title: "Uni-App/uniClound",
						percent: 70,
						color: "#2b90d9"
					}, {
						title: "Vue",
						percent: 80,
						color: "#7ed8cb"
					},

					{
						title: "Vant/Element/Uview/iView",
						percent: 80,
						color: "#d9ce52"
					}, {
						title: "less/scss",
						percent: 60,
						color: "#48ad31"
					}, {
						title: "Node.js/Express",
						percent: 80,
						color: "#a7d9be"
					}, {
						title: "Git",
						percent: 70,
						color: "#81a8d9"
					}, {
						title: "Mysql/MongoDB",
						percent: 80,
						color: "#d9b8c9"
					}, {
						title: "Java/python",
						percent: 70,
						color: "#8943d9"
					}
				]
			}
		},
		methods: {
			// Show(){
			// 	uni.getUserProfile({
			// 		desc: "进行验证",
			// 		lang: "zh_CN",
			// 		success(res) {
			// 			console.log(res.userInfo);
			// 			user=res.userInfo
			// 			console.log(this.avatarUrl);
			// 		}
			// 	})
			// },
			// on() {
			// 	uni.login({
			// 		provider: 'weixin',
			// 		success: function(res) {
			// 			let appid = 'wx691f85f1f84ca62a'
			// 			let secret = 'f8ae63d95e7409a9dd53dbeba755e4cf'
			// 			let url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' +
			// 				secret + '&js_code=' +
			// 				res.code + '&grant_type=authorization_code';
			// 			uni.request({
			// 				url: url, // 请求路径
			// 				success: result => {
			// 					console.info(result.data);
			// 				},
			// 			});

			// 		},
			// 	});
			// },
		}
	}
</script>

<style lang="scss">
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 34rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: $color-2;
	}

	.marjor {
		padding: 0 40rpx 0 60rpx;
		line-height: 40rpx;
	}

	.marjor>view {
		margin: 30rpx 0;
		font-size: 28rpx;
	}

	.title {
		font-weight: bold;
		color: #2b90d9;
	}

	.listIndex {
		font-weight: bold;
		margin-right: 10rpx;
	}

	.marjor>view>view {
		margin: 10rpx 0;
		font-size: 26rpx;
	}

	.bottom-icon {
		display: flex;
		justify-content: center;
		padding-right: 50rpx;
	}

	.bottom-icon .iconfont {
		margin: 0 50rpx;
		font-size: 40rpx;
		color: $color-4;
	}

	.progress {
		padding: 0 40rpx 0 60rpx;
		color: #2b90d9;
		margin-top: 10rpx;
	}
</style>
